import store from "@/store"
import { SET_TODO, SET_TODO_LIST, REMOVE_TODO,SET_TODO_STATUS,SET_DOING_STATUS} from "@/store/actionTypes"
import { ITodo, TODO_STATUS } from "@/typings"
import { watch } from "vue"

export interface IUseTodo {
  setTodo: (value: string) => void
  setTodoList: () => void
  removeTodo: (id: number) => void
  setStatus: (id: number) => void
  setDoing: (id: number) => void
}

interface IUseLocalStorage {
  getLocalList: () => ITodo[]
  setLocalList: (todoList: ITodo[]) => void
}
// Holo 方法实现
function useTodo(): IUseTodo {
  const { setLocalList, getLocalList }: IUseLocalStorage = useLocalStorage()
  const todoList: ITodo[] = getLocalList()
  
  watch(
    () => {
      return store.state.list
    }, (todoList: ITodo[]) => {
      setLocalList(todoList)
    }
  )
  //  Store -> set localStorage
  function setTodo(value: string): void {
    const todo: ITodo = {
      id: new Date().getTime(),
      content: value,
      status: TODO_STATUS.WILLDO
    }
    store.dispatch(SET_TODO, todo);
  }
  //  localStorage -> set Store List
  function setTodoList() {
    store.dispatch(SET_TODO_LIST, todoList)
  }

  function removeTodo(id: number) {
    store.dispatch(REMOVE_TODO,id)
  }

  function setStatus(id: number) {
    store.dispatch(SET_TODO_STATUS, id)
  }

  function setDoing(id: number) {
    store.dispatch(SET_DOING_STATUS, id)
  }

  function useLocalStorage(): IUseLocalStorage {
    function getLocalList(): ITodo[] {
      return JSON.parse(localStorage.getItem('todoList') || '[]')
    }

    function setLocalList(todoList: ITodo[]): void {
      localStorage.setItem('todoList',JSON.stringify(todoList))
    }

    return {
      getLocalList,
      setLocalList
    }
  }

  return {
    setTodo,
    setTodoList,
    removeTodo,
    setStatus,
    setDoing
  }
}
export {
  useTodo
}
